<template>
  <view relative w-full>
   <NavigationBar />
   <view style="padding: 0 35rpx 0 35rpx" box-border overflow-hidden>
      <view>
        <IndexSwiper :banner-list="bannerList" />
        <Category/>
        <ProductContainer  v-for="item in cardList" :key="item.id" :title="item.name" :list="item.productList" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getBannerList, getCardList } from '@/api';
import { ref } from 'vue';
import NavigationBar from '../components/NavigationBar.vue';//导入微信自适应组件
import IndexSwiper from '../components/IndexSwiper.vue';//导入轮播图
import Category from '../components/Category.vue';//导入导航组件
import ProductContainer from '../components/ProductContainer.vue';//导入课程组件
import { useObserver } from "../hooks/index"
let bannerList=$ref<string[]>([]);
let cardList = $ref<any[]>([]);
cardList = getCardList().data;
const targetIsVisible = ref(false);


onLoad(()=>{
  
  bannerList = getBannerList().data[0].imgUrl.split(',').map(item => item.replace('\n', ''))
})


</script>p

<style>

</style>
